NaN

Css 基础样式

Css版本

  1. CSS1: 1996年12月17日成为W3C推荐标准，该版本中提供了有关文字、颜色、位置和文本属性等基本信息。
  2. CSS2: 1998年5月,样式单得到了更多的充实。
  3. CSS3: 1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。各浏览器厂商对CSS3的支持也在不断的完善中。

(1) 盒子显示和隐藏

  1. display

    1. block 块级标签, 可以设置宽高, 无论内容有多少, 都要占据一行
    2. inline 行内标签, 宽高失效
    3. Inline-block 行内块级, 可以设置宽高, 但是不会占据一行
    4. none 无
    5. flex(后面学)
    6. table(略)
    <style>
    p {
        width: 200px;
        height: 50px;
        border: 1px solid;
    }
    p:nth-child(1) {
        /* 默认就是block */
        display: block;
    }
    p:nth-child(2) {
        display: inline;
    }
    p:nth-child(3) {
        display: inline-block;
    }
    p:nth-child(4) {
        display: none;
    }
</style>
 
<p> ppppppppppppppp </p>
<p> ppppppppppppppp </p>
<p> ppppppppppppppp </p>
<p> ppppppppppppppp </p>

  2. visibility

    • visible
    • hidden
    <!-- demo1 -->
<style>
    p:first-child {
        /* visible可见的, 默认的 */
        visibility: visible;
    }
    p:last-child {
        visibility: hidden;
    }
</style>

<p>p1111111111</p>
<p>p2222222222</p>

<!-- display:none和visibility:hidden -->
<!-- visibility:hidden元素看不见, 但是还会继续占据位置 -->
<style>
    p:first-child {  
        visibility: hidden;
    }
    p:last-child {
        visibility: visible;
    }
</style>

<p>p1111111111</p>
<p>p2222222222</p>


<!-- display:node元素看不见, 但是不会占据位置 -->
<style>
    p:first-child {  
        display: none;
    }
    p:last-child {
        display: block;
    }
</style>

<p>p1111111111</p>
<p>p2222222222</p>

(2) 宽高

宽高的几种单位

  1. px
  2. 百分比
  3. vw和vh
  4. rem(在项目讲)
  5. em(略)
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      html,body {
         height: 100%;
      }
      html {
         border: 1px solid green;
      }
      body {
         border: 1px solid;
         height: 500px;
      }
      p {
         background-color: gray;
      }
      p:nth-child(1) {
         width: 300px;
         height: 100px;
      }
      p:nth-child(2) {
         /* 百分比是相对父元素来讲 */
         width: 50%;
         height: 50%;
      }
      p:nth-child(3) {}
   </style>
</head>
<body>
   <p>px</p>
   <p>百分比</p>
   <p>百分比vw和vh</p>
</body>
</html>

(3) 字体

1. 字体家族

  • font-family样式指定了一个元素用什么样字体
  • font-family样式可以对一个元素指定多种字体, 如果浏览器不支持第一种字体, 则会尝试使用下一种字体
  • 字体可以继承
<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      p:nth-child(1) {
         font-family: sans-serif;
      }
      p:nth-child(2) {
         font-family: monospace;
      }
      p:nth-child(3) {
         font-family: cursive;
      }
   </style>
</head>
<body> 
   <p>字体1</p>
   <p>字体2</p>
   <p>字体3</p>
</body>
</html>

<!-- 因为字体可以继承, 所以只需要对body进行设置即可, 其他元素会继承body的字体设置 -->
<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        body {
            font-family: cursive,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <div>aaaaaaaaaaa</div>
    <p>bbbbbbbbbbbvbbb</p>
    <span>ccccccccccc</span>
    <span>ccccccccccc</span>
</body>
</html>

2. 字体颜色(四种单位)

  • 颜色英文单词
  • 十六进制记法
  • rgb
  • rgba
<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        p:nth-child(1){
            color: red;
        }    
        p:nth-child(2){
            /* color: #999999; */
            /* 简写 */
            color: #999; 
        }    
        p:nth-child(3){
            color: rgb(100, 200, 30);
        }    
        p:nth-child(4){
            /* 最后一个选项为透明度 */
            color: rgba(0, 0, 0, 0.5);
            background-color: rgba(0, 0, 0, 0.1);
        }  
        p:nth-child(5) {
            color: transparent;
        }  
    </style>
</head>
<body>
    <p>1.颜色名称</p>
    <p>2.16进制</p>
    <p>3.rgb</p>
    <p>4.rgba</p>
    <p>5.透明色</p>
</body>
</html>

3. 字体大小

font-size

4. 字体粗细

font-weight, 取值

  • bold 加粗
  • 100~900 400相当于normal(普通), 700等同于bold
<style>
    p {
        font-size: 30px;
        /* font-weight: bold; */
        font-weight: 900;
    }
</style>

<p>pppppppppp</p>

5. 文本行高

line-height样式表示行高, 取值

  • 使用px
  • 使用倍数, 倍数是相对字体font-size来讲
  • 当文字只有一行, 而且元素高度 = line-height 时, 文本就垂直居中
<style>
    p {
       background-color: rgba(0, 0, 0, .1);
       font-size: 20px;
    }
    p:nth-child(1){
        line-height: 50px;
    }
    p:nth-child(2){
        /* 使用倍数的时候,倍数是相对字体font-size来讲的 */
        line-height: 2;
    }
</style>

<p>使用px</p>
<p>使用倍数</p>


<!-- 垂直居中 -->
<style>
   div {
      height: 100px;
      border: 1px solid;
      line-height: 100px;
   }
</style>

<div>ppppppppp</div>

6. 文本对齐方式

文本对齐使用 text-align 样式进行设置, 取值

  • left(默认), 左对齐
  • center 居中对齐
  • right 右对齐
<style>
   p {
      height: 100px;
      border: 1px solid;
      line-height: 100px; 
   }
   p:nth-child(1) {
      text-align: left;
   }
   p:nth-child(2) {
      text-align: center;
   }
   p:nth-child(3) {
      text-align: right;
   }
</style>

<p>left: 天道酬勤</p>
<p>center: 天道酬勤</p>
<p>right: 天道酬勤</p>

(4) 背景

例子所用图片

1. 背景颜色

background-color:gray; , 若只设置背景颜色也可以直接使用background: gray;

2. 背景图片重复

使用background-repeat样式来设置背景图片的重复方式, 它的取值:

  1. repeat 默认横向重复, 纵向重复, 不写效果也一样
  2. no-repeat 不重复
  3. repeat-x 横向重复
  4. repeat-y 纵向重复
<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body>
<style> 
 p { 
    height: 200px;
    width: 200px;
    border: 1px solid;
    background-image: url(data:image/png;base64,iVBORw);
 }
 P:nth-child(1){
    background-repeat: repeat;
 }
 P:nth-child(2){
    background-repeat: no-repeat;
 }
 P:nth-child(3){
    background-repeat: repeat-x;
 }
 P:nth-child(4){
    background-repeat: repeat-y;
 }
</style>

<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

3. 背景图片大小(背景拉伸)

使用background-size对图片进行拉伸, 取值有以下3中方式

  1. background-size: contain；保持宽高比例, 拉伸至任意一边到最大。
  2. background-size: cover；保持宽高比例, 拉伸至最大(多出部分会被截掉)
  3. background-size: xx%, xx%; 不保持宽高比例, 可以设置百分比 4. background-size: xxpx, xxpx; 不保持宽高比例, 可以是任意数值的px或者, 实现任意拉伸的效果
<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body>
<style> 
 p { 
    height: 250px;
    width: 600px;
    border: 1px solid;
    background-image: url(http://zl.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png);
    background-repeat: no-repeat;
 }
 P:nth-child(1){
   background-size: contain;
 }
 P:nth-child(2){
   background-size: cover;
 }
 P:nth-child(3){
    background-size: 100% 100%; 
 }
 P:nth-child(4){
   background-size: 100px 100px; 
 }
</style>

<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

4. 背景图片位置

使用background-position对背景图片的位置进行设置, 它有以下几种取值:

  1. 使用px, background-position: xxpx xxxpx;
  2. 使用百分比, background-position: xx% xx%;
  3. 使用top(上), bottom(下), left(左), right(右), center 比如 background-position: left, bottom;
<!DOCTYPE html>
<html lang="en">

<head>
</head>
<style>
  p {
    height: 100px;
    width: 200px;
    border: 1px solid;
    background-image: url(http://zl.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png);
    background-repeat: no-repeat;
    background-size: 20% 30%;
  }

  P:nth-child(1) {
    background-position: 20px 20px;
  }

  P:nth-child(2) {
    background-position: 10% 10%;
  }

  P:nth-child(3) {
    background-position: top right;
  }

  P:nth-child(4) {
    background-position: center center;
  }
</style>

<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body> 
</html>

5. 背景合并写法 

<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body>
<style>
   p {
      width: 600px;
      height: 300px;
      border: 1px solid;
      /* 背景图片,背景重复,背景位置合并写法 */
      background: url(http://zl.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png)no-repeat left bottom;
      background-size: 200px 100px; 
   }
</style> 
<p></p>
</body>
</html>

6. 雪碧图(精灵图)

  • 把很多的小图标合并一张大图, 这样我们只需要从服务器获取一次图即可拿到很多的小图标, 可以提高网页性能
  • 通过背景图片定位(background-position)显示我们想显示的图标
  • 具体做法, 量出图标距离左上角的宽度和高度, 对background-position给负值即可
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        span {
            display: inline-block;
            height: 20px;
            width: 20px;
            border: 1px solid;
            background-image: url(http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png);
            background-repeat: no-repeat;
        } 
        .box span:nth-child(1) {
            background-position: -349px -148px;
        } 
        .box span:nth-child(2) {
            background-position: -374px -250px;
        } 
        .box span:nth-child(3) {
            background-position: -100px -250px;
        } 
    </style>
</head>

<body>
    <img src="http://zl.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png" alt="">

    <hr>  
    <p class="box">
        <span></span>
        <span></span>
        <span></span>
    </p>
</body>

</html>

盒模型相关: 宽高、边框、内外边距

(5) 边框

1. 边框设置

  • 第一个选项: 边框大小
  • 第二个选项: solid(实线)或虚线
  • 第三个选项: 边框颜色,
  • 取值为none时, 没有边框
  • 边框是可以分开写
    • border-top 上边框
    • border-bottom 下边框
    • border-left 左边框
    • border-right 右边框
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            height: 100px;
            width: 100px;
           
        }
        P:nth-child(1) {
            border: 1px solid red;
        }
        p:nth-child(2) {
            border-top: 1px solid;
            border-bottom: 1px solid;
        }
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

2. 圆角

  • 使用border-radius设置元素的圆角, 取值可以使用px或者百分比
  • 当border-radius的值为50%的时候, 元素是个圆(前提是元素宽高相等)
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            height: 100px;
            width: 100px;
           border: 1px solid;
        }
        P:nth-child(1) {
            border-radius: 10px; 
        }
        p:nth-child(2) {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

3. 三角形

  • 宽高设为0

  • 边框设为20px(根据需要)

  • 除底部边框外, 其它边框设为透明色

    <!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        p {
            height: 0;
            width: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid red;
        }
    </style>
</head> 
<body>
    <p></p>
</body> 
</html>

4. 边框图片

边框图片css3新增-了解

(6) 内边距padding

我们用padding样式来设置元素边缘跟元素内容之间的空白, padding的取值有

  • padding-top 上
  • padding-bottom 下
  • padding-left 左
  • padding-right 右
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        p {
            width: 200px;
            border: 1px solid;
        }

        p:nth-child(1) {
            /* 分开写 */
            padding-top: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
            padding-left: 15px;
        }

        /* 合并写法: 1个选项 */
        p:nth-child(2) {
            padding: 15px;
        }

        /*  合并写法: 4个选项上-右-下-左(顺时针) */
        p:nth-child(3) {
            padding: 10px 20px 30px 40px;
        }
         /*  合并写法: 3个选项上-左右-下 */
         p:nth-child(4) {
            padding: 10px 20px 30px;
        }
         /*  合并写法: 2个选项上下-左右 */
         p:nth-child(5) {
            padding: 20px 30px;
        }
    </style>
</head>

<body>
    <p>
        1.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        2.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        3.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        4.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        5.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p> 
</body> 
</html>

(7) 外边距margin

知识点:

  1. 外边距设置
  2. 外边距合并写法
  3. 外边距合并
  4. 外边距塌陷
  5. 元素居中

1. 外边距设置 

<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Document</title>
          <style>
            div {
              height: 200px;
              border: 1px solid;
              margin-left: 10px;
          	/* 可以使用负值 */      
              margin-top: 10px;
              margin-right: 10px;
              margin-bottom: 10px;
            }
          </style>
        </head>
        <body>
          <div></div>
        </body>
      </html>

2. 外边距合并写法 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <head>
        <style>
            div { 
                height: 200px;
                border: 5px solid;
                margin-top: 20px;
                margin-left: 20px;
                margin-right: 20px;
                padding: 15px;
            }
        </style>
    </head>

<body>
    <div>
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </div>
</body> 
</html>

3. 外边距合并

两个元素的margin进行合并的时候不是简单的相加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <head>
        <style>
            div { 
                width: 200px;
                height: 200px;
                border: 5px solid; 
            }
            div:nth-child(1) {
                margin-bottom: 20px;
            }
            div:nth-child(2) {
                margin-top: 30px;
            }
        </style>
    </head>

<body>
    <div> </div>
    <div> </div>
</body> 
</html>

4. 外边距塌陷

塌陷现象

​ 当我们给子元素设置margin-top的时候, 子元素与父元素并没有产生距离, 但是父元素往下"掉"了, 这种现象我们称之为margin-top塌陷, 原因是因为父元素和子元素在margin-top上进行了合并, 合并后的margin-top只作用于父元素上。

解决的办法：

  1. 给父元素添加边框
  2. 给父元素添加padding-top
  3. 给父元素添加overflow
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .aa {
            margin-top: 10px;
            width: 300px;
            height: 300px;
            background-color: gray;
            /* border-top: 1px solid transparent; */
            /* padding-top: 1px; */
            overflow: auto;
        }
        .aa .bb {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="aa">
        <div class="bb"></div>
    </div>
</body> 
</html>

5. 元素居中

  • 使用margin: 0 auto; 可以使块级元素在它的父元素内居中对齐
  • 对于行内元素, 使用对它的父元素使用 text-align: center; 进行居中
<!-- 块级元素居中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
       width: 300px;
       height: 100px;
       border: 1px solid;
       margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <p>
        生活总是两难，再多执着，再多不肯，最终不得不学会接受。从哭着控诉，到笑着对待，到头来，不过是一场随遇而安。
    </p>
  </body>
</html>

<!-- 行内或行内块级元素居中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
     .aa {
       width: 300px;
       height: 300px;
       border: 1px solid;  
       text-align: center;
     } 
    </style>
  </head>
  <body>
    <div class="aa"> 
      <span class="bb">我爱web</span>
    </div>
  </body>
</html>

(8) 固定定位

知识点:

  1. 固定定位示例
  2. 固定定位导致元素塌陷
  3. 固定定位元素"位置之争"
  4. 固定定位的应用
    • 背景遮罩层
    • loading和弹窗

1. 固定定位示例

  • 将元素设置为 position:fixed 元素可以固定在屏幕(浏览器视口)的任何一个位置
  • 元素设置为固定定位之后, 元素的不再是块级元素, 而是变成 "行内块级", 若是元素没有内容, 且没有设置宽度, 那么它的宽度为0
  • 元素设置了宽高, 上下同在取上, 左右同在取左
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * { margin: 0; }
    p {
      height: 100px;
      width: 100px;
      background-color: red;
      position: fixed;
      /* top: 10px; */
      bottom: 10px;
      /* left: 10px; */
      right: 10px;
    }
  </style>
</head> 
<body>
  <p></p>
</body> 
</html>

2. 固定定位导致元素塌陷

元素设置为固定定位之后, 元素会脱离文档流，和它在同一个位置的普通元素， 会“陷进去”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * { margin: 0; }
    nav {
      height: 50px;  
      background-color: rgba(0, 0, 0, .5);
      color: #fff;
      text-align: center;
      line-height: 50px;
      position: fixed;
      width: 100%;
      top: 0;
    }
    .box {
      margin-top: 60px;
      height: 100px;
      background-color: green; 
    }
  </style>
</head> 
<body>
  <nav>
    导航栏
  </nav>

  <div class="box">
    我爱web前端
  </div>
</body> 
</html>

3. 固定定位元素"位置之争"

两个元素都设置了固定定位, 并且重叠在了一起, 可以使用z-index来调整它们的前后顺序, 规则是谁设置的数值大, 谁就在上面

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; }
    
    div {
      width: 200px;
      height: 200px;
      border: 1px solid;
      position: fixed;
    }
    .box1 {
      background-color: gray;
      z-index: 3;
    }
    .box2 {
      margin: 50px;
      background-color: green;
      z-index: 2;
    }
  </style>
</head> 
<body>  
  <div class="box1">
    我爱web前端
  </div> 
  <div class="box2">我也爱web前端</div>
</body> 
</html>

4. 固定定位的应用

  1. 顶部导航栏和底部导航栏(略)
  2. 半透明遮罩层
  3. 屏幕正中间的对话框(弹窗)
    • 设置为固定定位(若有需要也设置一下z-index)
    • top:50%, left: 50%;
    • margin-left: 元素宽度一半(取负数), margin-top: 元素高度一半(取负数)
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; }
    .pop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
    }
    
  </style>
</head> 
<body>  
  <div class="pop"> </div> 
  <img src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png" alt=""> 
</body> 
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * { margin: 0; }
    .pop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 99;
    }
    .box {
      width: 200px;
      height: 50px;
      background-color: #fff;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 100;
      margin-left: -100px;
      margin-top: -25px;
    }
    
  </style>
</head> 
<body>  
  <div class="pop"> </div> 
  <img src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png" alt=""> 
  <!-- 对话框 -->
  <div class="box">温馨提示!!</div>

</body> 
</html>

(9) 相对定位和绝对定位

1. 绝对定位元素特征

给元素设置为绝对定位之后, 元素拥有和固定定位类似的特征:

  • 元素变成"行内块级"
  • 脱离文档流, 相同位置的元素会"塌陷"
  • 也可以使用z-index来调整元素的叠放顺序

2. 定位子元素在父元素中的位置

可以使用相对定位和绝对定位把子元素放置到父元素的任意一个位置, 步骤:

  1. 把父元素设置为相对定位
  2. 把子元素设置为绝对定位
  3. 设置子元素在父元素中的位置
<!DOCTYPE html>
<html lang="en">
<head>  
  <style> 
    .aa {
      margin: 50px;
      width: 300px;
      height: 300px;
      border: 1px solid;
      /* 1.父元素设置为相对定位 */
      position: relative;
    }
    .aa .bb {
      width: 50px;
      height: 50px;
      background-color: green;
      /* 2. 把子元素设置为绝对定位 */
      position: absolute;
      /* 3.设置子元素在父元素中的位置top,left,right,bottom */
      bottom: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="aa">
    <div class="bb"></div>
  </div>
</body>
</html>

(10) 元素内容溢出

  1. 溢出处理

    当元素里的内容大于元素的宽度或者高度的时候, 内容就会溢出, 我们使用overflow(overflow-x, overflow-y)样式来处理溢出, 它的取值

    • hidden 隐藏
    • scroll 滚动
    • auto 自动

    注: 当内容是没有空格的字母时, 不会自动换行, 比如 ppppppppppp

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 150px;
            height: 50px;
            border: 1px solid red;
        }
        p:nth-child(1) {
            overflow-x: hidden;
        }
        p:nth-child(2) {
            overflow-x: scroll;
        }
        p:nth-child(3) {
            overflow-x: scroll;
        }
        p:nth-child(4) {
            overflow-x: auto;
        }

    </style>
</head>
<body>
    <!-- hidden 隐藏 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 滚动条 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 没有溢出时,同样会有滚动条的'轨道'' -->
    <p> ppppppppppp</p> 
    <!-- auto 自动 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
     <!-- auto 不溢出时没有滚动条 -->
    <p> ppppppppppp </p>
</body>
</html>


<!-- overflow对于内容是元素, 也是一样的道理 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa {
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* overflow-x: scroll; 
            overflow-y: hidden; */
            overflow: auto;
        }
        .aa .bb {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .5);
        }

    </style>
</head>
<body>
     <div class="aa">
         <div class="bb"></div>
     </div>
</body>
</html>

  2. 文本溢出用省略号显示

    • 单行文本溢出
    • 多行文本溢出
    <!-- 单行文本溢出 -->
<!DOCTYPE html>
<html lang="en">
<head>  
  <style> 
    p {
      width: 200px;
      border: 1px solid;
      padding: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
   <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>


<!-- 多行行文本溢出 -->
<!DOCTYPE html>
<html lang="en"> 
<head>
  <style>
    p {
      width: 200px;
      line-height: 20px; 
      height: 60px;
      border: 1px solid; 
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body> 
</html>

(12) 盒子模型(盒模型)

知识点:

  1. 什么是盒模型, 它有哪几部分
  2. 盒模型的两种模式(类型)有什么区别
  3. 如何修改盒模型的类型

1. 什么是盒模型, 盒模型包含哪些东西

一个元素尝尝包含以下这几部分内容, 这几部分内容就组成了一个盒子模型:

  • width(height)
  • padding
  • border
  • margin

一个盒子所占空间尺寸为:

**总宽度:**margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

上面例子的元素所占空间总宽度为: 20*2 + 10*2 + 20*2 + 100 = 200

盒子的总宽度为: 160(不算margin)

2. 盒模型的两种类型(模式)有什么区别

  1. w3c标准模型(默认), 盒子宽度(高度)的计算公式为:

    盒子的总宽度 = border-left + padding-left + width + padding-right + border-right (边框+padding+width)

  2. IE盒模型(怪异盒模型)

    盒子的总宽度 = width

  3. 两种盒模型的区别(主要是盒子宽度计算方式不一样):

    • 标准盒模型: 给元素添加border和padding, 盒子会"变"大
    • 怪异盒模型: 给元素添加border和padding, 盒子不会"变大"

3. box-sizing修改盒模型的类型

  1. 什么是盒模型, 盒模型包含哪些东西
  2. 盒模型的两种类型有什么区别
  3. box-sizing修改盒模型的类型
    • box-sizing: content-box w3c标准盒模型(默认)
    • box-sizing: border-box 怪异盒模型
<!DOCTYPE html>
<html lang="en"> 
<head>
  <style>
    p {
      width: 200px;
      height: 200px;
      background-color: gray;
      border: 10px solid red;
      padding: 20px;
      margin: 20px;
    }
    p:nth-child(1) {
      box-sizing: content-box;
    }
    p:nth-child(2) {
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <p> w3c标准盒模型 </p> 
  <p> 怪异盒模型</p> 
</body> 
</html>

作业

  1. 用css编写一个倒三角形, 一个尖角朝左的三角形和一个尖角朝右的三角形

  2. 编写四个按钮(要一样大), 依次显示新浪微博图标, 橙色点赞图标, 红包图标

  3. 完成下面的效果图

    image-20211210103535267